<template>
  <div>
    <div class="wrapper">
      <div style="width: 100%;height: 85px; background-color: #000;"></div>
      <div style="width: 100%;height: 85%;background-color:white;">
        <div class="HeadAndName_Row">
          <img :src="inviteInfo.HeadImg" class="img-circle"/>
          <p>{{inviteInfo.NickName}}</p>
        </div>
        <div class="signature ">
          <p>{{inviteInfo.PersonalizedSignature}}</p>
        </div>
        <div class="invite-Itemli">
          <ul>
            <li></li>
            <li>
              <p>碧选格言</p>
            </li>
            <li></li>
          </ul>
        </div>
        <div class="invite_row">
          <p>
            没有一种生活，能够凌驾于自由之上。<br/>
            没有一个随随便便的信仰，能与1,500,000人共鸣<br/>
            分享美丽，让自己独立<br/>
            你的创业路上始终有我，<br/>
            从过去到现在，为更好而战。<br/>
            BETTER IS NEWLIFE
          </p>
        </div>
        <div class="o-pulic-setfoot" style="overflow:hidden;padding-bottom:30px;">
          <div class="col-xs-12">
            <a @click="()=>$router.push('/login?inviteCode=' + inviteCode)">
              <p style="margin-top:10%;">现在去登录</p>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mineApi } from '@/api'
export default {
  components: {
  },
  async created() {
    const inviteCode = this.$route.query.inviteCode
    this.inviteCode = inviteCode
    if (!inviteCode) {
      return
    }
    const res = await mineApi.getInfoByInviteCode(inviteCode)
    console.log('res', res)

    this.inviteInfo = res.data
    this.inviteInfo.HeadImg = this.inviteInfo.head_img
    this.inviteInfo.NickName = decodeURIComponent(this.inviteInfo.nickname)
    // this.inviteInfo.PersonalizedSignature = decodeURIComponent(this.inviteInfo.nickname)
  },
  data() {
    return {
      topResource: {
        centerCont: ''
      },
      inviteCode: '',
      inviteInfo: {}
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/assets/css/mixin.scss";
@import 'src/assets/css/variables.scss';
  .wrapper {
    position: fixed;
    left: 0;
    top: 0;
    background: #fff;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*background-color: #000;*/
  }

  .img-circle {
    border-radius: 50%;
    margin-top: -35px;
    height: 70px;
    width: 70px;
    margin-bottom: 10px;
  }

  .HeadAndName_Row {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .signature {
    padding-left: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 12px;
  }

  .invite-Itemli li {
    float: left;
    width: 23%;
    text-align: center;
    border-bottom: 1px solid #DEDEDE;
  }

  .invite-Itemli li:nth-child(2) {
    width: 54%;
    border-bottom: 0;
    margin-top: -10px;
    font-size: 1.4rem;
    color: black;
  }

  .invite-Itemli {
    padding: 20px 50px 30px 50px;
  }

  .QR-row {
    clear: both;
  }

  .invite_row p {
    padding-left: 15px;
    line-height: 20px;
    font-size: 12px;
  }

  .o-pulic-setfoot p {
    font-size: 16px;
    color: white;
    margin: 0;
    /* background: -webkit-linear-gradient(left, #A38456, #CABA96); */
    background-color: $color-theme;
    line-height: 41px;
    text-align: center;
    border-radius: 20px;
    margin-top: 20%;
    width: 80%;
    margin-left: 10%;
  }
</style>
